<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>display属性</title>
	<style>
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		
		.box div{
			width: 100px;
			height: 50px;
			/* background-color: #0f0; */
			font-size: 20px;
			/* color: #fff; */
			/* border: 1px solid #ccc; */
			text-align: center;
			line-height: 50px;
			margin: 20px;
			padding: 20px;
			display: inline-block;
			display: none;
		}
		
		.box2 span{
			display: block;
			width: 50px;
			height: 50px;
			padding: 10px;
			margin: 10px;
		}
		
		.box3,.box4,.box5{
			width: 200px;
			height: 200px;
			background-color: #0f0;
		}
		
		.box4{
			background-color: #00f;
			/* display: none; */
			/* visibility:hidden; */
			opacity: .3;
		}
		
		.zi{
			opacity: .5;
			width: 100px;
			height: 100px;
			background-color: #ccc;
		}
		
		.box5{
			background-color: #f00;
		}
	</style>
</head>

<body>
	<pre>
		块级元素(block)特性：
			    总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
			    宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
			内联元素(inline)特性：
			    和相邻的内联元素在同一行;
			    宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
			块级元素主要有：
			   h1-h6,p,hr,div,address,pre,ol,ul,li,dl,dt,dd,table,tr,thead,tbody,tfoot,caption,form
			内联元素主要有：
			   span,b,strong,em,i,var,u,ins,del,strike,s,big,small,sup,sub,a,img,th,td,input,label,select,textarea,button,iframe
				
				
			CSS中块级、内联元素的应用：
			    利用CSS我们可以摆脱上面HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
			主要用的CSS样式有以下三个：
			    display:block  -- 显示为块级元素
			    display:inline  -- 显示为内联元素
			    display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
			    我们常将<ul>下li元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
				
				

			display:设置一个元素应该如何显示
			    none            不显示       不占空间
			    block           显示为块元素
			    inline          显示为行(内联)元素
			    inline-block    显示为行内块级元素
			visibility:可见性
			    hidden            不可见     占空间  相当于透明的
			    visible         可见的
			opacity:透明度   
			    值      介于0到1之间       0完全透明    1完全不透明    子元素继承
			类似于颜色中的 rgba (255,0,0,.5)      
			
		</pre>


	<div class="box">
		<div>11</div>
		<div>22</div>
		<div>33</div>
		<div>44</div>
		<div>55</div>
	</div>
	
	<div class="box2">
		<span>11</span><span>22</span><span>33</span><span>44</span><span>55</span>
	</div>
	
	<div class="box3"></div>
<div class="box4">
	<div class="zi"></div>
</div>
<div class="box5"></div>
	

	





	<div style="height: 200px;"></div>
</body>

</html>